<template>
  <div class="dashboard-editor-container">
    <link
      href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1"
      rel="stylesheet"
      type="text/css"
    />
    <!--基础信息-->
    <div class="info">
      <!--信息-->
      <div style="width: 70%">
        <!--信息-->
        <div class="info-wrap">
          <div class="img">
            <img :src="imgNameData" style="width: 70px;height: 70px">
          </div>
          <div class="info-detail" style="width: 30%">
            <div style="margin-top: 10px">
              <!-- {{ userData.userName }} -->
              {{ userxx.nickName }}
              <img
                src="@/assets/img/edit.png"
                style="
                  width: 10px;
                  height: 10px;
                  margin-left: 5px;
                  margin-right: 25px;
                "
                v-show="editShow"
              />
              <!-- <img
                src="@/assets/img/sex.svg"
                style="width: 15px; height: 15px"
              /> -->
            </div>
            <div
              style="display: flex; align-items: center; margin-bottom: 10px"
            >
              <img
                src="@/assets/img/phone.svg"
                style="width: 15px; height: 15px; margin: 0px 5px 0px 0px"
              />
              <!-- {{ userData.phonenumber }} -->
              {{ userxx.phonenumber }}
            </div>
          </div>
          <div class="xxBox" style="width: 55%; padding-top: 10px">
            <div>
              <div style="display: flex; align-items: center">
                实名认证：
                <span
                  @click="RealNameShow"
                  v-if="RealNameData == 1"
                  class="RealName"
                >
                  未认证
                  <span>
                    <img
                      src="@/assets/img/wrz2.png"
                      alt=""
                      style="
                        height: 18px;
                        display: flex;
                        align-items: center;
                        margin-left: 5px;
                      "
                    />
                  </span>
                </span>
                <span
                  v-else
                  style="
                    display: flex;
                    align-items: center;
                    flex-direction: no-wrap;
                  "
                >
                  已认证
                  <span>
                    <img
                      src="@/assets/img/yrz2.png"
                      alt=""
                      style="
                        height: 17px;
                        display: flex;
                        align-items: center;
                        margin-left: 5px;
                      "
                    />
                  </span>
                </span>
              </div>
              <div style="margin-right: 124px; margin-top: 8px">
                所属角色：{{ roleData }}
              </div>
            </div>
            <div>
              <div>欢迎来到{{ userData.userName }}管理后台！</div>

              <div style="margin-top: 8px">登录时间：{{ LoginTime }}</div>
            </div>
          </div>
        </div>
        <!--按钮-->
        <div
          style="
            display: flex;
            color: #3875f6;
            font-size: 18px;
            text-align: center;
            margin-left: 95px;
            margin-top: 50px;
          "
        >
          <div
            style="
              background: #ffffff;
              width: 80px;
              border-radius: 30px;
              height: 38px;
              line-height: 40px;
              margin-right: 20px;
              cursor: pointer;
              box-shadow: 0 5px 5px rgba(0, 0, 255, 0.3);
            "
            @click="editButton"
          >
            编辑
          </div>
          <div
            style="
              background: #ffffff;
              width: 100px;
              border-radius: 30px;
              height: 38px;
              line-height: 40px;
              cursor: pointer;
              box-shadow: 0 5px 5px rgba(0, 0, 255, 0.3);
            "
            @click="InvitationCodeBoxShow = true"
          >
            邀请码
          </div>
          <!-- <div
            style="
              background: #ffffff;
              width: 100px;
              border-radius: 30px;
              height: 38px;
              line-height: 40px;
              cursor: pointer;
              box-shadow: 0 5px 5px rgba(0, 0, 255, 0.3);
            "
            @click="InvitationButton"
          >
            邀请码
          </div> -->
        </div>
      </div>
      <!--二维码-->
      <div v-if="roleData != '平台'">
        <vue-qr v-show="qrcode" :text="qrcode" :margin="7" :size="70"></vue-qr>
        <div
          style="
            margin-top: 50px;
            width: 70px;
            text-align: center;
            font-size: 20px;
            color: white;
          "
        >
          <!-- {{ Invitation }} -->
          邀请码
        </div>
      </div>
      <!--帮助中心-->
      <div v-if="roleData != '平台'" style="margin-left:65px">
        <img src="@/assets/img/bzzx.png" alt="" style="height:70px">
        <div
          style="
            margin-top: 50px;
            width: 80px;
            text-align: center;
            font-size: 20px;
            color: white;text-decoration:underline;cursor:pointer; 
          "
          @click="HelpCenter"
        >
          <!-- {{ Invitation }} -->
          帮助中心
        </div>
      </div>
    </div>
    <!--数据-->
    <div class="content">
      <div class="data">
        <div class="data-card" style="">
          <div class="card" style="margin-right: 20px">
            <div class="qtsrBox" v-show="mouseoverShowText">
              <span v-if="roleData == '用户'">其它收入</span>
              <span v-else>其它支出</span>
            </div>
            <div class="title-Box">
              <span>资金概述</span>
              <!-- <div
                @mouseover="mouseoverShow"
                @mouseout="mouseoutShow"
                style="color: rgb(56, 117, 246); cursor: pointer"
                class="animate__animated animate__pulse animate__infinite"
              >
                {{ CardData.totalOther || 0 }}
                <span style="font-size: 17px">元</span>
              </div> -->
              <!-- <span @mouseover="mouseoverShow" style="color:rgb(56, 117, 246)">{{ CardData.totalOther || 0 }}元</span> -->
            </div>
            <div
              v-if="roleData == '用户'"
              style="
                height: 280px;
                display: flex;
                justify-content: space-evenly;
                align-items: center;
              "
            >
              <div style="margin-top: -60px">
                <div
                  style="
                    color: #666666;
                    font-size: 20px;
                    display: flex;
                    justify-content: center;
                  "
                >
                  总收入
                </div>

                <div
                  @mouseenter="swing = false"
                  @mouseleave="swing = true"
                  class="animate__animated animate__swing"
                  :class="{ animate__infinite: swing }"
                  style="
                    color: #3875f6;
                    cursor: pointer;
                    font-size: 33px;
                    margin-top: 20px;
                  "
                >
                  <!-- 总收入 -->
                  <span @click="withdrawBotton">
                    {{ CardData.totalIncome || 0 }}
                    <span style="font-size: 17px"></span>
                  </span>
                </div>
              </div>
              <div style="margin-top: -60px">
                <div
                  style="
                    color: #666666;
                    font-size: 20px;
                    display: flex;
                    justify-content: center;
                  "
                >
                  余额
                </div>
                <div
                  @mouseenter="swing = false"
                  @mouseleave="swing = true"
                  class="animate__animated animate__swing"
                  :class="{ animate__infinite: swing }"
                  style="
                    color: #3875f6;
                    cursor: pointer;
                    font-size: 33px;
                    margin-top: 20px;
                  "
                >
                  <span @click="withdrawBotton">
                    {{ CardData.balance || 0 }}
                    <span style="font-size: 17px"></span>
                  </span>
                </div>
              </div>
            </div>

            <div
              v-else
              style="
                height: 280px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
              "
            >
              <div style="margin-top: -60px">
                <div
                  style="
                    color: #666666;
                    font-size: 20px;
                    margin-top: -10px;
                    font-size: 20px;
                    display: flex;
                    justify-content: center;
                  "
                >
                  总支出
                </div>
                <div
                  @mouseenter="swing = false"
                  @mouseleave="swing = true"
                  class="animate__animated animate__swing"
                  :class="{ animate__infinite: swing }"
                  style="
                    color: #3875f6;
                    cursor: pointer;
                    font-size: 33px;
                    margin-top: 20px;
                  "
                >
                  <!-- 总支出 -->
                  <span @click="withdrawBotton">
                    <!-- {{ CardData.totalExpend || 0 }} -->
                    {{ CardData.totalIncome || 0 }}
                    <span style="font-size: 17px"></span
                  ></span>
                </div>
              </div>
            </div>

            <div style="display: flex; margin-top: -35px">
              <div class="money" style="border-right: 1px solid #eeeeee">
                <div class="label" v-if="roleData == '用户'">
                  佣金收入
                  <img src="@/assets/img/money.png" />
                </div>
                <div class="label" v-else>
                  佣金支出
                  <img src="@/assets/img/money.png" />
                </div>
                <div class="value">
                  {{ CardData.totalCommission || 0
                  }}<span style="font-size: 17px"></span>
                </div>
              </div>
              <div class="money" style="border-right: 1px solid #eeeeee">
                <div class="label" v-if="roleData == '用户'">
                  分成收入
                  <img src="@/assets/img/fencheng.svg" />
                </div>
                <div class="label" v-else>
                  分成支出
                  <img src="@/assets/img/fencheng.svg" />
                </div>
                <div class="value">
                  {{ CardData.totalProfit || 0
                  }}<span style="font-size: 17px"></span>
                </div>
              </div>
              <div class="money">
                <div class="label" v-if="roleData == '用户'">
                  其它收入
                  <img src="@/assets/img/qtzcbt.png" />
                </div>
                <div class="label" v-else>
                  其它支出
                  <img src="@/assets/img/qtzcbt.png" />
                </div>
                <div class="value">{{ CardData.totalOther || 0 }}</div>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="title">团队</div>
            <div class="team">
              <div class="team-item" style="">
                <div
                  style="
                    color: #666666;
                    font-size: 20px;
                    display: flex;
                    justify-content: center;
                    margin-top: 55px;
                  "
                >
                  总人数
                </div>
                <div class="value" style="padding-top: 18px; font-size: 33px">
                  {{ pageData.teamSum }}
                  <span style="font-size: 16px"
                    ><span style="font-size: 17px">人</span></span
                  >
                </div>
              </div>
              <!-- <div class="team-line"></div> -->
              <!-- <div
                class="team-item"
                style="padding-top: 20px; margin-left: -20px"
              >
                <div class="value">2个</div>
                <div class="label">团队</div>
              </div> -->
            </div>
            <div style="margin-top: 15px">
              <div class="team-lian">
                <div class="value">
                  {{ pageData.StraightTeam || 0
                  }}<span style="font-size: 17px">人</span>
                </div>
                <div class="label">直联团队</div>
              </div>

              <div class="team-lian">
                <div class="value">
                  {{ pageData.BetweenTeam || 0
                  }}<span style="font-size: 17px">人</span>
                </div>
                <div class="label">间联团队</div>
              </div>
            </div>
          </div>
        </div>

        <div class="data-line chartBox" ref="dataLine">
          <div class="title" style="padding: 0px 25px; margin: 0px">数据</div>
          <div style="margin-top: 10px">
            <div
              style="
                display: flex;
                justify-content: space-between;
                padding: 0px 25px;
              "
            >
              <!-- <div>
                选择项目：
                <el-select
                  v-model="projectParam"
                  clearable
                  placeholder="请选择项目"
                  @change="echarBotton"
                >
                  <el-option
                    v-for="item in projectOptions"
                    :key="item.value"
                    :label="item.proName"
                    :value="item.proId"
                  >
                  </el-option>
                </el-select>
              </div> -->

              <div>
                <el-button
                  type="primary"
                  size="mini"
                  @click="dateTimeBotton('DAY')"
                  >日</el-button
                >
                <el-button
                  type="primary"
                  size="mini"
                  @click="dateTimeBotton('MONTH')"
                  >月</el-button
                >
                <el-button
                  type="primary"
                  size="mini"
                  @click="dateTimeBotton('YEAR')"
                  >年</el-button
                >
              </div>
            </div>
            <!-- <div ref="chart" style="width: 100%; height: 340px;margin-top: -30px;"/> -->
            <div id="main"></div>
            <!-- <img src="@/assets/img/tbBox.png" alt="" style="height: 260px" /> -->
          </div>
        </div>
      </div>
      <div class="notice">
        <div class="title" style="padding: 0px 25px">公告</div>
        <div style="overflow-y: auto; height: 97%; padding: 0px 25px">
          <el-timeline style="margin: 20px 0 0 40px">
            <el-timeline-item v-for="(item, index) in activities" :key="index">
              <template v-if="item.img">
                <div
                  slot="dot"
                  style="
                    height: 70px;
                    width: 70px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: relative;
                    overflow: hidden;
                    border-radius: 50%;
                    border: 4px solid #d6e8fe;
                    left: -30px;
                  "
                >
                  <!-- <div
                  slot="dot"
                  style="
                    overflow: hidden;
                    border-radius: 50%;
                    border: 4px solid #d6e8fe;
                    position: relative;
                    left: -30px;
                    background: white;
                  "
                > -->
                  <!-- <img :src="item.img" style="width: 60px;height: 60px;"/> -->
               
                  <div class="userAvatarBox">
                     <!-- <img :src="require(''+userInfo.img)" style="width: 70px;height: 70px"> -->
                     <img :src="imgNameData" style="width: 70px;height: 70px">
                  </div>
                 

                </div>
                <div style="height: 70px"></div>
              </template>
              <template v-else-if="item.date">
                <div
                  slot="dot"
                  style="
                    width: 60px;
                    height: 60px;
                    line-height: 60px;
                    background: rgb(99, 111, 236);
                    color: white;
                    border-radius: 50%;
                    text-align: center;
                    position: absolute;
                    top: -10px;
                    left: -24px;border:1px red solid
                  "
                >
                  {{ item.date }}
                </div>
                <div style="height: 60px"></div>
              </template>
              <template v-else>
                <div
                  slot="dot"
                  :class="item.type"
                  style="
                    border-radius: 50%;
                    padding: 4px;
                    position: relative;
                    left: -2px;
                    background: white;
                  "
                ></div>
                <div>
                  <!-- 时间戳 -->
                  <div
                    style="
                      position: absolute;
                      left: -90px;
                      width: 80px;
                      text-align: right;
                      color: #888;
                    "
                  >
                    <!-- {{ item.timestamp }} -->
                    {{ item.cTime }}
                  </div>
                  <!-- 标签 -->
                  <div style="margin-bottom: 10px; color: black">
                    <!-- <span>{{ item.title }}</span> -->
                    <span style="font-size: 15px">{{ item.noticeName }}</span>
                    <span v-if="item.tags && item.tags.length > 0">
                      <span
                        v-for="(tag, i) in item.tags"
                        :key="i"
                        :class="'tag-' + tag.type"
                        style="
                          color: white;
                          width: 60px;
                          display: inline-block;
                          border-radius: 20px;
                          text-align: center;
                          padding: 4px;
                        "
                      >
                        {{ tag.content }}
                      </span>
                    </span>
                  </div>
                  <div
                    style="
                      padding: 10px;
                      background: rgb(247, 247, 247);
                      color: #999;
                      border-radius: 4px;
                    "
                  >
                    <!-- {{ item.content }} -->
                    {{ item.text }}
                  </div>
                </div>
              </template>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </div>
    <!-- //二维码弹窗 -->
    <el-dialog title="" :visible.sync="IndirectShow" width="330px">
      <div class="InvitationBox">
        <vue-qr v-show="qrcode" :text="qrcode" :margin="1" :size="250"></vue-qr>
        <div style="width: 70px; text-align: center; font-size: 20px">
          {{ Invitation }}
        </div>
      </div>
    </el-dialog>
    <!-- 编辑弹窗 -->
    <el-dialog
      title="编辑账户"
      :visible.sync="editShow"
      width="30%"
      :before-close="editFalse"
    >
      <el-form
        ref="userxx"
        :model="userxx"
        :rules="userDatarules"
        size="medium"
        label-width="110px"
      >
        <el-form-item label="用户名称" prop="nickName">
          <el-input
            v-model="userxx.nickName"
            maxlength="10"
            placeholder="请输入用户名称"
            show-word-limit
            clearable
            :style="{ width: '85%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phonenumber">
          {{ userxx.phonenumber }}
          <el-button
            type="text"
            @click="editPhonenumber(true)"
            v-if="!phonenumberCode"
            >修改</el-button
          ><el-button v-else type="text" @click="editPhonenumber(false)"
            >取消修改</el-button
          >
        </el-form-item>
        <el-form-item label="手机验证码：" prop="code" v-if="phonenumberCode">
          <div class="divFlex">
            <el-input
              v-model.trim="userxx.code"
              placeholder="验证码"
              class="enrollInp"
              clearable
              maxlength="10"
              onkeyup="this.value=this.value.replace(/\D/g,'')"
            ></el-input>
            <el-button
              type="primary"
              size="mini"
              :disabled="gain.flag"
              @click="sendCodeFun('form1')"
            >
              {{ gain.title }}</el-button
            >
          </div>
        </el-form-item>
        <el-form-item
          label="新手机号码"
          prop="newPhonenumber"
          v-if="phonenumberCode"
        >
          <el-input
            v-model="userxx.newPhonenumber"
            placeholder="请输入新手机号码"
            :maxlength="11"
            show-word-limit
            clearable
            :disabled="showPhone"
            :style="{ width: '85%' }"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="editShow = false">取消</el-button>
        <el-button type="primary" @click="editNewPhonenumber">确定</el-button>
      </div>
    </el-dialog>
    <!-- 实名弹窗 -->
    <el-dialog title="实名" :visible.sync="tanShow1" width="30%" center>
      <el-form
        ref="elForm"
        :model="formData5"
        :rules="rules5"
        size="medium"
        label-width="110px"
      >
        <el-form-item label="真实姓名" prop="field101">
          <el-input
            v-model.trim="formData5.field101"
            placeholder="请输入真实姓名"
            clearable
           
            maxlength="10"
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="field102">
          <el-input
            v-model="formData5.field102"
            placeholder="请输入身份证号"
            clearable
            maxlength="18"
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>


         <el-form-item label="手机验证码" prop="code">
          <div class="divFlex">
            <el-input
              v-model.trim="formData5.code"
              placeholder="验证码"
              class="enrollInp"
              clearable
              maxlength="10"
              onkeyup="this.value=this.value.replace(/\D/g,'')"
            ></el-input>
            <el-button
              type="primary"
              size="mini"
              :disabled="gain.flag"
              @click="sendCodeFun('form1')"
            >
              {{ gain.title }}</el-button
            >
          </div>
        </el-form-item>




      </el-form>
      <div slot="footer">
        <el-button @click="tanShow1 = false">取消</el-button>
        <el-button type="primary" @click="handelConfirm5">确定</el-button>
      </div>
    </el-dialog>

    <!-- <el-dialog :visible.sync="InvitationCodeBoxShow" center :show-close="false">
   
   
    </el-dialog> -->

    <div class="InvitationCodeBox" :modal="true" v-if="InvitationCodeBoxShow">
      <div class="InvitationCodeMiniBox">
        <div class="InvitationCodeBoxImg">
          <vue-qr
            v-show="qrcode"
            :text="qrcode"
            :margin="15"
            :size="185"
          ></vue-qr>
          <div
            style="width: 100%; text-align: center; font-size: 20px"
            class="textBox"
          >
            邀请码：{{ Invitation }}
          </div>
          <div class="InvitationButtonBox">
            <el-button
              size="mini"
              class="Button_Box"
              :disabled="gain.flag"
              @click="InvitationCodeBoxShow = false"
            >
            </el-button>
          </div>
        </div>
        <!-- XX关闭 -->
        <div
          class="escInvitationCodeBoxImg"
          @click="InvitationCodeBoxShow = false"
        >
          <img src="@/assets/img/tcxx.png" alt="" class="imgXX" />
        </div>
      </div>
    </div>

    <!-- 新邀请码弹窗 -->

    <!-- 公告弹窗 -->
    <Dialog
      ref="mychild"
      @AddAnnouncement="AddAnnouncement"
      :uelLocation="uelLocation"
    />
  </div>
</template>

<script>
import Dialog from "@/views/components/Dialog.vue";
import * as echarts from "echarts";
import "animate.css";
import {
  getSetup,
  selectByInvitationCodeIsUserId,
  getMenuList,
  chart,selectUserIdByConfig
} from "@/api/system/index";
import { getInfo, getIdentityAndTopId, getAliDy } from "@/api/login.js";
import VueQr from "vue-qr";
import {
  getUserProfile,
  updateUserProfile,
  selectByTeamUserByOne,
  updatePhoneByUserId,
} from "@/api/system/user";
import userAvatar from "./system/user/profile/userAvatar";
import { selectByTeamSum, updateRUser,frontUpdateRUser } from "@/api/base/index.js";
import {
  capUserWalletRecordStatistics,
  capPoolAccountRecordStatistics,
  selectCapUserWalletById,
} from "@/api/finance/index.js";
import { listAPI } from "@/api/projectManagement/index.js";
export default {
  data() {
    return {
      //头像
      imgNameData:'',
      option: {
        color: ["#538AFF"],
        xAxis: {
          type: "category",
          boundaryGap: false,
          // data: ["1", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          data: [],
        },
        yAxis: {
          // type: "value",
        },
        tooltip: {
          trigger: "axis",
        },
        series: [
          {
            // data: [820, 932, 901, 934, 1290, 1330, 1320],
            data: [],
            type: "line",
            areaStyle: {},
            smooth: true,
          },
        ],
      },
      //邀请码新弹窗
      InvitationCodeBoxShow: false,
      //实名按钮
      RealNameButton: false,
      //是否已认证
      RealNameData: "",
      formData5: {
        field101: "",
        field102: "",
        code: "",
      },
      rules5: {
        field101: [
          {
            required: true,
            message: "请输入真实姓名",
            trigger: "change",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "change",
          },
        ],
        field102: [
          {
            required: true,
            message: "请输入身份证号",
            trigger: "change",
          },
          {
            pattern:
              /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            message: "格式错误",
            trigger: "change",
          },
          //   {
          //   pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
          //   message: '格式错误',
          //   trigger: 'change'
          // }
        ],
      },
      //实名认证
      tanShow1: false,
      //新手机号是否能输入
      showPhone: true,
      // 定时器
      timer: undefined,
      //  获取验证码按钮
      gain: {
        title: "获取验证码",
        flag: false,
      },
      //修改手机号是否显示验证码
      phonenumberCode: false,
      //年月 日
      dateTime: "MONTH",
      //其它收入支出弹
      mouseoverShowText: false,
      //租户ID
      TenantId: "",
      //传递当前路由地址
      uelLocation: "",
      //编辑弹窗
      editShow: false,
      userDatarules: {
        nickName: [
          {
            required: true,
            message: "请输入用户名称",
            trigger: "blur",
          },
        ],
        phonenumber: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: "blur",
          },
          {
            pattern: /^1(3|4|5|7|8|9)\d{9}$/,
            message: "手机号格式错误",
            trigger: "blur",
          },
        ],
        newPhonenumber: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: "change",
          },
          {
            pattern: /^1(3|4|5|7|8|9)\d{9}$/,
            message: "手机号格式错误",
            trigger: "change",
          },
        ],
        //  验证码
        code: [
          { required: true, message: "验证码不能为空", trigger: "change" },
        ],
      },
      userxx: {},
      //项目列表
      projectOptions: [
        {
          value: "选项1",
          label: "黄金糕",
        },
      ],
      projectParam: "",
      projectDataSummary: false,

      //弹窗
      IndirectShow: false,
      htmlname: "",
      //登陆时间
      LoginTime: "",
      // 左卡片
      CardData: {},
      //所属角色
      roleData: "",
      //二维码
      Invitation: "",
      //二维码链接
      qrcode: "",
      moneyList: [
        {
          name: "佣金收入",
          // icon: require("@/assets/images/money.png"),
          price: "533.54",
        },
        {
          name: "分成收入",
          // icon: require("@/assets/images/divide.png"),
          price: "80000.00",
        },
      ],
      userData: { phonenumber: "", createTime: "", userName: "" },
      userId: "",
      // 页面信息
      pageData: {},
      swing: true,
      chart: null,
      userInfo: {
        img: "./img/header.jpg",
        name: "爱吃鱼的小猫",
        phone: "15735835669",
        email: "ry@163.com",
        role: "普通用户",
        createTime: "2021-01-22 07:27:43",
      },
      activities: [
        {
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201712%2F15%2F20171215221023_KiYWM.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639574514&t=061edfc2475a852df49b797e85d3b6ae",
        },
        {
          timestamp: "一小时前",
          title: "人员变更",
          type: "primary",
          content:
            "百度公司推出的一部内容开放、自由的网络百科全书。其测试版于2006年4月20日上线",
        },
        {
          timestamp: "2018-04-12 20:46",
          title: "变更",
          type: "warning",
          content:
            "正式版在2008年4月21日发布，截至2020年10月，百度百科已经收录了超2100万个词条",
        },
        {
          timestamp: "2018-04-12 20:46",
          title: "再次变更",
          type: "danger",
          content:
            "正式版在2008年4月21日发布，截至2020年10月，百度百科已经收录了超2100万个词条",
          tags: [
            {
              type: "warning",
              content: "提示",
            },
            {
              type: "danger",
              content: "严重",
            },
          ],
        },
        {
          timestamp: "2018-04-12 20:46",
          title: "信息",
          type: "success",
          tags: [
            {
              type: "primary",
              content: "查看",
            },
          ],
          content:
            "正式版在2008年4月21日发布，截至2020年10月，百度百科已经收录了超2100万个词条",
        },
        {
          date: "2020",
        },
        {
          timestamp: "2018-04-12 20:46",
          title: "人员变更",
          type: "primary",
          content:
            "正式版在2008年4月21日发布，截至2020年10月，百度百科已经收录了超2100万个词条",
        },
        {
          timestamp: "2018-04-12 20:46",
          title: "人员变更",
          type: "primary",
          content:
            "正式版在2008年4月21日发布，截至2020年10月，百度百科已经收录了超2100万个词条",
        },
      ],
      dataLine: [],
    };
  },
  components: { VueQr, userAvatar, Dialog },
  async created() {
    //获取当前时间
    this.LoginTime = this.moment().format("YYYY-MM-DD HH:mm:ss");
  },
  async mounted() {
    // 获取用户ID
    const res = await getInfo();
    console.log(res, "用户信息222");
    if (res.code == 200 && res.user) {
      this.userxx = res.user;
      sessionStorage.userID = res.user.userId;
      this.userId = res.user.userId - 0;
    }
    //获取是租户还是用户还是平台
    const { data } = await getIdentityAndTopId();
    console.log(data, "用户信息平台还是租户");
    if (data.topId) {
      this.TenantId = data.topId - 0;
      sessionStorage.TenantId = data.topId;
      //获取团队收入信息
    }
    this.userName = data.identity;

    this.start();
    //获取公告列表
    this.announcementList();

    this.roleData = data.identity;
    sessionStorage.userName = data.identity;
    this.projectData();
    //初始化图表
    this.$nextTick(() => {
      this.initChart();
    });
    //公告弹窗
    if (data.identity == "用户") {
      this.AddAnnouncement();
    }
  },
  methods: {
    //帮助中心按钮
    HelpCenter(){
      this.$router.push("/base/help")
      // alert("帮助中心")
    },
    //实名
    // 实名弹窗函数
    handelConfirm5() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          // console.log(this.formData5.field102,'身份证')
          var reg =
            /^(([1][1-5])|([2][1-3])|([3][1-7])|([4][1-6])|([5][0-4])|([6][1-5])|([7][1])|([8][1-2]))\d{4}(([1][9]\d{2})|([2]\d{3}))(([0][1-9])|([1][0-2]))(([0][1-9])|([1-2][0-9])|([3][0-1]))\d{3}[0-9xX]$/;
          console.log(reg.test(this.formData5.field102), "身份证222");
          if (!reg.test(this.formData5.field102)) {
            this.$message({
              message: "请输入正确的身份证号",
              type: "warning",
            });
          } else {
            let param = {
              realname: this.formData5.field101, //真实姓名
              idCard: this.formData5.field102, //身份证号
              one: this.userxx.phonenumber, //手机号
              // one: '17639181867', //手机号
              two: this.formData5.code, //验证码
              uId: this.userId, //id
            };
            console.log(this.formData5, "实名按钮");
            frontUpdateRUser(param).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "实名成功！",
                });
                this.start();
                this.tanShow1 = false;
              } else {
                this.$message.error("实名失败！");
              }
            });
          }
        };
        // this.close();
      });
    },
    //实名
    RealNameShow() {
      this.tanShow1 = true;
    },
    // 关闭定时器
    timerFunEnd() {
      this.gain.title = "获取验证码";
      this.gain.flag = false;
      this.showPhone = false;
      clearInterval(this.timer);
    },
    // 定时器
    timerFun() {
      this.gain.flag = true;
      let timerNum = 60;
      this.gain.title = timerNum + "秒后重试";

      this.timer = setInterval(() => {
        timerNum--;
        // console.log(11);
        if (timerNum < 0) {
          this.timerFunEnd();
        } else {
          this.gain.title = timerNum + "秒后重试";
        }
      }, 1000);
    },
    // 发送短信验证码
    async sendCodeFun(el) {
      this.showPhone = false;
      // console.log(this.userxx.phonenumber);
      this.timerFun();
      // console.log(this[el].phoneNumber);
      let param = {
        phone: this.userxx.phonenumber,
        // phone: '17639181867',
        url: this.Invitation,
      };
      const data2 = await getAliDy(param);
      console.log(data2, "222222222");
      if (data2.code == 200) {
        this.sendCodeFlag = true;
      } else {
        this.$message.error(data2.msg);
      }
    },
    //手机号码的修改按钮
    editPhonenumber(row) {
      this.phonenumberCode = row;
    },
    //年月日按钮
    dateTimeBotton(row) {
      this.dateTime = row;
      this.echarBotton();
    },
    async echarBotton() {
      // console.log(this.projectParam, "项目ID000000000000");
      //  DAY日   MONTH月   YEAR年
      let param = {
        tenantId: sessionStorage.getItem("TenantId") - 0 || this.userId - 0,
        type: this.dateTime,
        // projectId: this.projectParam,
      };
      const data = await chart(param);
      let typeTime = "";
      // console.log(data, "图表");
      if (data.code == 200) {
        if (data.data.length > 0) {
          // 一进来初始化一下
          this.option.xAxis.data = [];
          this.option.series[0].data = [];
          if (this.dateTime == "DAY") {
            typeTime = "日";
          } else if (this.dateTime == "MONTH") {
            typeTime = "月";
          } else {
            typeTime = "年";
          }
          data.data.map((item) => {
            this.option.xAxis.data.push(item.x + typeTime);
            this.option.series[0].data.push(item.y);
          });
          // console.log(this.option, "---");
        } else {
          this.option = {
            color: ["#538AFF"],
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: [0],
            },
            yAxis: {
              // type: "value",
            },
            tooltip: {},
            series: [
              {
                data: [0],
                type: "line",
                areaStyle: {},
                smooth: true,
              },
            ],
          };
        }
      } else {
        this.$message.error(data.msg);
      }
    },
    //鼠标移入其他收入或其它支出
    mouseoverShow() {
      this.mouseoverShowText = true;
    },
    mouseoutShow() {
      this.mouseoverShowText = false;
    },
    //右侧公告栏
    async announcementList() {
      let param = {
        pageSize: 100,
        pageNum: 1,
        userId: sessionStorage.getItem("TenantId") - 0 || this.userId,
      };
      const data = await getMenuList(param);
      console.log(data, "公告列表");
      //四个颜色
      // primary danger warning success
      let color = [
        { name: "success" },
        { name: "primary" },
        { name: "warning" },
        { name: "danger" },
      ];
      if (data.code == 200 && data.data.list.length > 0) {
        let index2 = 0;
        data.data.list.forEach((item, index) => {
          index2++;
          if (index2 == color.length) {
            index2 = 0;
          }
          item.type = color[index2].name;
          // 前面小圆点的颜色
          // if(item.state=='PC'){
          //       item.type="primary"
          // }else{
          //      item.type="success"
          // }
        });

        let tt = [
          {
            img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201712%2F15%2F20171215221023_KiYWM.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639574514&t=061edfc2475a852df49b797e85d3b6ae",
          },
        ];
        let param = tt.concat(data.data.list);
        console.log(param, "666");
        this.$nextTick(() => {
          param[1].tags= [
            {
              type: "warning",
              content: "提示",
            },
            {
              type: "danger",
              content: "严重",
            },
          ],
          param[2].tags= [
             {
              type: "primary",
              content: "查看",
            },
          ],
          this.activities = param;
          console.log( this.activities,'99999')
        });
      }

      //  this.activities=[
      //     {
      //       img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201712%2F15%2F20171215221023_KiYWM.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639574514&t=061edfc2475a852df49b797e85d3b6ae",
      //     },
      //     {
      //       timestamp: "一小时前",
      //       title: "人员变更",
      //       type: "primary",
      //       content:
      //         "百度公司推出的一部内容开放、自由的网络百科全书。其测试版于2006年4月20日上线",
      //     },
      //     {
      //       timestamp: "2018-04-12 20:46",
      //       title: "变更",
      //       type: "warning",
      //       content:
      //         "正式版在2008年4月21日发布，截至2020年10月，百度百科已经收录了超2100万个词条",
      //     },
      //     {
      //       timestamp: "2018-04-12 20:46",
      //       title: "再次变更",
      //       type: "danger",
      //       content:
      //         "正式版在2008年4月21日发布，截至2020年10月，百度百科已经收录了超2100万个词条",
      //       tags: [
      //         {
      //           type: "warning",
      //           content: "提示",
      //         },
      //         {
      //           type: "danger",
      //           content: "严重",
      //         },
      //       ],
      //     },
      //     {
      //       timestamp: "2018-04-12 20:46",
      //       title: "信息",
      //       type: "success",
      //       tags: [
      //         {
      //           type: "primary",
      //           content: "查看",
      //         },
      //       ],
      //       content:
      //         "正式版在2008年4月21日发布，截至2020年10月，百度百科已经收录了超2100万个词条",
      //     },
      //     {
      //       date: "2020",
      //     },
      //     {
      //       timestamp: "2018-04-12 20:46",
      //       title: "人员变更",
      //       type: "primary",
      //       content:
      //         "正式版在2008年4月21日发布，截至2020年10月，百度百科已经收录了超2100万个词条",
      //     },
      //     {
      //       timestamp: "2018-04-12 20:46",
      //       title: "人员变更",
      //       type: "primary",
      //       content:
      //         "正式版在2008年4月21日发布，截至2020年10月，百度百科已经收录了超2100万个词条",
      //     },
      //   ];
    },
    //编辑弹窗取消函数
    editFalse() {
      this.editShow = false;
      this.start();
    },
    //修改手机号
    editNewPhonenumber() {
      this.$refs["userxx"].validate(async (valid) => {
        if (valid) {
          let param={};
          if(this.phonenumberCode){
              param = {
            invitationCode: this.userxx.code, //验证码
            phonenumber: this.userxx.phonenumber, //旧手机号
            remark: this.userxx.newPhonenumber, //新手机号
            userId: this.userId - 0, //用户ID
          };
          // console.log(this.userxx,'888999')
          updatePhoneByUserId(param).then((response) => {
            if (response.code == 200) {
              this.msgSuccess("修改成功,请再次登录!");
              this.editShow = false;
              this.start();
            } else {
              this.$message.error("提交失败");
            }
          });
          }else{
            param={
               nickName:this.userxx.nickName,  //用户昵称
            userId:this.userId,  //用户ID
            phonenumber:this.userxx.phonenumber //手机号
            };
            console.log(param,'555')
           
              //更改用户名称
             updateUserProfile(param).then((res) => {
            if (res.code == 200) {
              this.msgSuccess("修改成功!");
              this.editShow = false;
              this.start();
            } else {
              this.$message.error('操作失败!');
            }
          });
          }
         
        }
      });
    },

    //获取项目列表
    async projectData() {
      if (this.roleData == "租户") {
        let param = {
          pageSize: 100,
          pageNum: 1,
        };

        const data = await listAPI(param);
        console.log(data, "获取项目列表66666699999");

        if (data.code == 200) {
          if (data.data.list.length > 0) {
            this.projectOptions = data.data.list;
            this.projectParam = data.data.list[0].proId;
          }
        } else {
          this.$message.error(data.msg);
        }
      } else {
        const userData = await proUserList(param);
        if (userData.code == 200) {
          if (userData.data.list.length > 0) {
            this.projectOptions = userData.data.list;
            this.projectParam = data.data.list[0].proId;
          }
        } else {
          this.$message.error(userData.msg);
        }
      }
      this.echarBotton("DAY");
    },

    async AddAnnouncement() {
      //获取余额
      const balance = await selectCapUserWalletById({ userId: this.userId }); //获取账户余额
      console.log(balance, "当前账户余额");
      if (balance.code == 200) {
        this.CardData.balance = balance.data.balance;
      } else {
        this.$message.error(balance.msg);
      }
      //传递子组件当前的路由；然后调用子组件的事件函数
      this.uelLocation = window.location.pathname.slice(1);
      this.$refs.mychild.gitData();
    },
    withdrawBotton() {
      if (this.userName == "用户") {
        this.$router.push("/finance/userManage/AccountIndex");
      }
    },
    //编辑按钮
    editButton() {
      this.editShow = true;
      // this.userxx.phonenumber=this.userData.phonenumber;
      // this.userxx.userName=this.userData.userName;
      // this.$router.push("/user/profile");
    },
    InvitationButton() {
      this.IndirectShow = true;
    },
    // 初始化图表
    async initChart() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(this.option);
    },
    async start() {
     
      // 获取用户ID
      const res = await getInfo();
      console.log(res, "用户信息222");
      if (res.code == 200 && res.user) {
        this.userxx = res.user;
        sessionStorage.userID = res.user.userId;
        
        sessionStorage.userData =JSON.stringify(res.user) ;
        this.userId = res.user.userId - 0;
      }

      // 获取卡片
      // 右卡片
      const { data } = await selectByTeamSum({ userId: this.userId });
      console.log(data, "右卡片");

      this.pageData = data;

      let param = {};
      //
      if (this.roleData == "用户") {
        param = {
          tenantId: this.TenantId - 0, //租户ID
          toUserId: res.user.userId - 0, //用户id
        };
      } else {
        param = {
          fromUserId: res.user.userId - 0, //用户id
          tenantId: res.user.userId - 0, //租户ID
        };
      }
      // toUserId: this.userId, //用户id
      const card = await capPoolAccountRecordStatistics(param);
      console.log(card, "6677-------------");
      if (card.code == 200) {
        this.CardData.totalOther = card.data.otherAmount - 0; //其他总收入
        this.CardData.totalProfit = card.data.profitAmount; //分润总收入
        this.CardData.totalCommission = card.data.comnissionAmount - 0; //佣金总收入
        this.CardData.totalIncome = card.data.totalAmount - 0; //总支出总收入
      }

      //获取邀请码
      const yqm = await selectByInvitationCodeIsUserId();
      // console.log(yqm, "获取邀请码");
      if (yqm.code == 200) {
        this.Invitation = yqm.msg;
        // this.qrcode = `http://192.168.31.130/login?redirect=%2Findex&yqm=${yqm.msg}&judge=2`;
        this.qrcode = `http://av.91weiduan.cn/login?redirect=%2Findex&yqm=${yqm.msg}&judge=2`;
      }

      // Y76glH
     const pz = await selectUserIdByConfig();
      console.log(pz, "获取基础设置++");
      if (pz.code == 200 && pz.data) {
        this.htmlname = pz.data.appName;
        this.imgNameData=pz.data.appLogoUrl;
        //保存到临时存储本地
        sessionStorage.setupParam = JSON.stringify(pz.data);
      } else {
        this.$message.error(szData.msg);
      };

      // const pz = await getSetup();
      // console.log(pz, "获取基础设置++");
      // if (pz.code == 200 && pz.data) {
      //   this.htmlname = pz.data.appName;
      //   //保存到临时存储本地
      //   sessionStorage.setupParam = JSON.stringify(pz.data);
      // }

      //查询是否实名认证
      const userRealName = await selectByTeamUserByOne();

      if (userRealName.code == 200) {
        //1是未实名  0是已实名
        this.RealNameData = userRealName.data.state;
        console.log(userRealName, "用户信息2");
      } else {
        this.$message.error(userRealName.msg);
      }

      // //获取用户个人信息
      // const userParma = await getUserProfile();
      // console.log(userParma.data, "用户信息/////////");
    },
  },
  watch: {
    option: {
      handler: function (nVal, oVal) {
        if (this.chart) {
          if (nVal) {
            this.myChart.setOption(nVal);
          } else {
            this.myChart.setOption(oVal);
          }
        } else {
          this.initChart();
        }
      },
      deep: true,
    },
  },
};
</script>
<style lang="scss">
.xxBox {
  border-left: 1px rgb(206, 206, 206) solid;
  border-right: 1px rgb(206, 206, 206) solid;
  display: flex;
  justify-content: space-evenly;
  div {
    color: #ffffff;
  }
}
.el-timeline {
  .el-timeline-item {
    .el-timeline-item__tail {
      border-left: 1px solid #d4d4d5;
    }
  }
}
</style>
<style lang="scss" scoped>
//公告线条
::v-deep .el-timeline .el-timeline-item .el-timeline-item__tail {
  border-left: 1px #eee solid;
}

//弹窗在屏幕中间
::v-deep .el-dialog__wrapper {
   display: flex;
   justify-content: center;
   align-items: center;
}
::v-deep .el-dialog:not(.is-fullscreen) {
  margin-top: 0vh !important;
}
.chartBox {
  //

  #main {
    position: absolute;
    left: -15px;
    top: 750px;
    width: 1110px;
    height: 300px;
    //  border: 1px red solid;
  }
}

//邀请码
.InvitationCodeBox {
  width: 100%;
  height: 100%;
  position: fixed;

  margin: auto;
  left: 0;
  right: 0;
  bottom: 0px;
  background: rgba(77, 77, 77, 0.6);
  .InvitationCodeMiniBox {
    height: 600px;
    width: 500px;
    position: fixed;
    // border:1px solid red;
    top: 0px;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 10px;

    // position: relative;
    // left: 30%;
    // height: 600px;
    // width: 500px;
    // bottom:1000px;
    background: url("../assets/img/yqmbjBox.png") no-repeat center;
    background-size: 20% 20%;
    background-size: contain;
    .InvitationCodeBoxImg {
      border: 1px rgba(206, 206, 206, 0) solid;

      position: absolute;
      left: 155px;
      top: 220px;
      // height: 100%;
      // width:100%;
      .textBox {
        // margin-left:30%;
        // border: 1px red solid;
        padding-right: 10px;
        color: #fff;
        margin-top: 10px;
        font-weight: 100;
      }
      .InvitationButtonBox {
        margin-top: 18px;
        .Button_Box {
          width: 200px;
          height: 50px;
          margin-left: -10px;
          background: rgba(206, 206, 206, 0);
          border: rgba(206, 206, 206, 0);
        }
      }
    }
  }
  // 关闭XX
  .escInvitationCodeBoxImg {
    position: absolute;
    left: 95%;
    top: 20%;
    height: 30px;
    width: 30px;
    // border: 2px #fff solid;
    cursor: pointer;
    border-radius: 50%;
    .imgXX {
      position: relative;
      height: 30px;
      width: 30px;
      left: 10px;
      top: 4px;
      // border: 1px red solid;
      // border: rgba(206, 206, 206, 0);
    }
  }
}
// 实名认证
.RealName {
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-direction: no-wrap;
  color: red;
  text-decoration: underline;
}
//验证码
.divFlex {
  display: flex;
  // border: 1px red solid;
  .enrollInp {
    width: 60%;
  }
  button {
    margin-left: 10px;
  }
}
.card {
  position: relative;
  .qtsrBox {
    // border: 1px red solid;
    position: absolute;
    left: 380px;
    top: -20px;
    width: 100px;
    height: 37px;
    display: flex;
    justify-content: center;
    padding-top: 4px;
    color: #ffffff;
    background: url("../assets/img/yjjx.png") no-repeat center;
  }
}

.title-Box {
  font-weight: 500;
  font-size: 20px;
  // border: 1px red solid;
  display: flex;
  display: flex;
  justify-content: space-between;
}
.dashboard-editor-container {
  padding: 20px;
  background-color: rgb(240, 242, 245);
  position: relative;
       height: 100%;
       width: 100%;
       overflow-y: scroll;
  .info {
    height: 200px;
    background: #6d90fb;
    border-radius: 5px;
    padding: 20px 30px;
    display: flex;
    .info-wrap {
      height: 70px;
      display: flex;

      .img {
        height: 70px;
        width: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        border-radius: 50%;
        border: 4px solid white;
        box-shadow: 0 0 40px #3a66f1;
      }

      .info-detail {
        height: 100%;
        border-right: 0.5px solid rgba(230, 230, 250, 0.2);
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 30px;
      }
    }
  }

  .content {
    height: 800px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;

    .title {
      font-weight: 500;
      font-size: 20px;
      // border: 1px red solid;
      display: flex;
      justify-content: flex-start;
    }

    .data {
      height: 100%;
      width: 60%;

      .data-card {
        height: 400px;
        display: flex;
        /*justify-content: space-between;*/

        .card {
          height: 100%;
          /*width: 486px;*/
          width: 50%;
          background: white;
          border-radius: 5px;
          padding: 20px 25px;

          .money {
            width: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .label {
              color: #999999;
              font-size: 16px;
              margin-bottom: 10px;
              display: flex;
              justify-content: center;
              align-items: center;

              img {
                width: 17px;
                height: 17px;
                margin-left: 8px;
              }
            }

            .value {
              font-size: 23px;
            }
          }

          .team {
            height: 150px;
            display: flex;
            justify-content: center;
            align-items: center;

            .team-item {
              display: flex;
              flex-direction: column;
              justify-content: center;
              // align-items: center;
              // border:1px red solid;
              // margin-top:10px;
            }

            .label {
              color: #666666;
            }

            .value {
              color: #3875f6;
              font-size: 26px;
            }

            .team-line {
              width: 120px;
              height: 4px;
              border-bottom: 2px solid #3676f7;
              text-align: center;
              -webkit-transform: rotate(135deg);
              -moz-transform: rotate(135deg);
              filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=0.45);
            }
          }

          .team-lian {
            background: #f7f8fa;
            height: 60px;
            margin-bottom: 15px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .value {
              color: #457ef6;
              font-size: 23px;
            }

            .label {
              color: #b1b2b2;
              font-size: 14px;
              margin-top: 5px;
            }
          }
        }
      }

      .data-line {
        margin-top: 20px;
        height: 380px;
        background: white;
        border-radius: 5px;
        padding: 20px 0px;
      }
    }

    .notice {
      height: 100%;
      width: 38.7%;
      border-radius: 5px;
      background: white;
      padding: 20px 0;
    }
  }
}
.InvitationBox {
  // border: 1px red solid;
  display: flex;
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.tag-primary {
  background: rgb(83, 138, 255);
  box-shadow: 0 0 10px rgba(83, 138, 255, 0.8);
  margin-left: 10px;
}

.tag-danger {
  background: rgb(253, 102, 102);
  box-shadow: 0 0 10px rgba(253, 102, 102, 0.8);
  margin-left: 10px;
}

.tag-warning {
  background: rgb(250, 178, 68);
  box-shadow: 0 0 10px rgba(250, 178, 68, 0.8);
  margin-left: 10px;
}

.primary {
  border: 3px solid rgb(83, 138, 255);
}

.danger {
  border: 3px solid rgb(253, 102, 102);
}

.warning {
  border: 3px solid rgb(250, 178, 68);
}

.success {
  border: 3px solid rgb(32, 226, 184);
}
.success2 {
  border: 3px solid rgb(226, 32, 184);
}
.success3 {
  border: 3px solid rgb(64, 226, 32);
}
.success4 {
  border: 3px solid rgb(213, 226, 32);
}
</style>
